<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row type="flex" justify="space-between">
        <el-col>
          <EcharsCard :title="tit.one">
            <one v-if="allList.one" :item="allList.one" />
            <template #icon>
              <i class="el-icon-info" />
            </template>
            <template v-if="allList.one" #foot> 日答题数量：{{ allList.one[3] }} </template>
          </EcharsCard>
        </el-col>
        <el-col>
          <EcharsCard :title="tit.two">
            <radar v-if="allList.two" :item="allList.two" />
            <template #icon>
              <i class="el-icon-info" />
            </template>
            <template v-if="allList.two" #foot> 试题库数量：{{ allList.two[0].all }} </template>
          </EcharsCard>
        </el-col>
        <el-col>
          <EcharsCard :title="tit.three">
            <pie v-if="allList.three" :item="allList.three" />
            <template #icon>
              <i class="el-icon-info" />
            </template>
            <template v-if="allList.three" #foot> 前端试题数量：{{ allList.three[0].all }} </template>
          </EcharsCard>
        </el-col>
        <el-col>
          <EcharsCard :title="tit.four">
            <four v-if="allList.four" :item="allList.four" />
            <template #icon>
              <i class="el-icon-info" />
            </template>
            <template v-if="allList.four" #foot> 上周新增总量：{{ allList.four[0].all }} </template>
          </EcharsCard>
        </el-col>
      </el-row>
      <el-row type="flex">
        <EcharsCard style="height: 380px">
          <five v-if="allList.five" :item="allList.five" />
        </EcharsCard>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          <EcharsCard :title="tit.six" style="height: 365px">
            <six />
          </EcharsCard>
        </el-col>
        <el-col :span="12">
          <EcharsCard :title="tit.seven" style="height: 365px">
            <seven v-if="allList.seven" :item="allList.seven" />
          </EcharsCard>
        </el-col>
      </el-row>
      <el-row>
        <EcharsCard :title="tit.eight" style="height: 500px">
          <eight v-if="allList.four" :item="allList.four" style="display:flex" />
        </EcharsCard>
      </el-row>
    </div>
  </div>
</template>

<script>
import EcharsCard from './components/echarsCard.vue'
import radar from './components/radar.vue'
import pie from './components/pie.vue'
import one from './components/one.vue'
import four from './components/four.vue'
import five from './components/five.vue'
import six from './components/six.vue'
import seven from './components/seven.vue'
import eight from './components/eight.vue'

import { getEchars } from '@/api/echs'
export default {
  name: 'Dashboard',
  components: {
    EcharsCard,
    radar,
    pie,
    one,
    four,
    five,
    six,
    seven,
    eight
  },
  data() {
    return {
      tit: {
        one: '总答题数量',
        two: '试题方向',
        three: '试题学科分布',
        four: '上周试题新增',
        six: '线上热门搜索',
        seven: '销售额类别占比',
        eight: '周搜索趋势'
      },
      allList: {}
    }
  },
  created() {
    this.initDate()
  },
  methods: {
    async initDate() {
      const res = await getEchars()
      console.log(res)
      this.allList = res
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
